{include file="public/header"}
<title>小区详情</title>
      <style>
          body{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
            background-color: #fff;
          }
          /*头部*/
          .top{
            height: 60px;
            width: 100%;
            background:rgba(22,26,39,1);
          }
          .top_box{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            align-items: center;

          }
          .top_name_left{
            width:38px;
            height:38px;
            background:rgba(52,99,230,1);
            border-radius:10px;
            margin-right: 10px;
          }
          .top_name{
            height:60px;
            font-size:24px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:60px;
          }
          .top_name_r{
            width:76px;
            height:30px;
            border-radius:15px;
            border:1px solid rgba(255,255,255,1);
            margin-left:26px;
            align-items: center;
            justify-content: center;
            display: flex;
          }
          .top_name_r img{
            height: 16px;
            width: 16px;
          }
          .top_name_r span{
            height:22px;
            line-height: 22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            margin-left: 3px;
          }
          .lii{
            height:22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:#84868D;
            line-height:22px;
            margin-right: 24px;
          }
          .white{
            color: #fff;
          }
          .top_login{
            margin-left: 36px;
            display: flex;
            align-items: center;
          }
          .top_login img{
            width: 28px;
            height: 28px;
          }
          .top_login span{
            height:22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:22px;
            margin-left: 8px;
          }
          .top_marginR{
            margin-right: 16px;
          }
          /*头部*/

          /*footer1样式*/
          .footer{
            width:100%;
            height:130px;
            background:rgba(31,31,31,1);
            display: flex;
            align-items: center;
          }
          .footer_in{
            width: 1210px;
            margin: 0 auto;
            height:18px;
            font-size:13px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:18px;
          }
          /*footer1样式*/

          /*导航*/
          .content{
            width: 100%;
            background-color: #F5F5F6;
          }
          .navigation{
            width: 1200px;
            margin: 0 auto;
            height: 56px;
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            display: flex;
            align-items: center;
          }
          .navigation img{
            height: 14px;
            width: 14px;
          }
          .navigation_title{
            width: 1200px;
            margin: 0 auto;
            height: 70px;
            margin-top: 10px;
            font-size:26px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
          }
          /*导航*/
          /*内容*/
          .contents{
            width: 1200px;
            margin: 0 auto;
            padding-top: 40px;
          }
          .swiper_introduction{
            width: 430px;
            margin-left: 60px;
          }
          .swiper_introduction_title{
            width: 100%;
            height: 50px;
            border-bottom: 1px solid  #EDEDED;
            align-items: center;
          }
          .swiper_introduction_title_num{
            font-size:42px;
            font-family:Helvetica-Bold;
            font-weight:bold;
            color:rgba(231,99,76,1);
            margin-right: 24px;
            display:table-cell; /*按照单元格的样式显示元素*/
            vertical-align:bottom; /*底对齐*/
            padding-bottom: 14px;
          }
          .swiper_introduction_title_num span{
            font-size:16px;
          }
          .swiper_introduction_title_num2{
            font-size:16px;
            font-family:Helvetica-Bold;
            color:rgba(51,51,51,1);
            padding-bottom: 20px;
          }
          .swiper_introduction_title_num2 span{
          font-weight:bold;
          }
          .swiper_introduction_title_coll{
            width: 100px;
            height:38px;
            border-radius:4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            cursor: pointer;
          }
          .swiper_introduction_title_coll img{
            height: 18px;
            width: 18px;
          }
          .swiper_introduction_title_coll span{

            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            margin-left: 3px;
            line-height:38px;
          }
          .swiper_introduction_con{
            padding-top: 20px;
            border-bottom: 1px solid #EDEDED;
            align-items: center;
          }
          .swiper_introduction_con span{
            margin-right: 15px;
          }
          .swiper_introduction_con span:last-child{
            margin-right: 0px;
          }
          .swiper_introduction_xin{
            padding: 20px 0;
            border-bottom: 1px solid #EDEDED;
          }
          .swiper_introduction_xin .flex-wrap div{
            width: 50%;
          }
          .swiper_introduction_ci{
            font-size: 14px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-bottom: 10px;
          }

          .iLeft {
            width: 70px;
            color: rgba(153, 153, 153, 1);
          }
          .swiper_introduction_tou{
            height: 60px;
            padding: 20px 0;
            display: flex;
            align-items: center;
          }
          .swiper_introduction_tou img{
            height: 60px;
            width: 60px;
            margin-right: 11px;
          }
          .swiper_introduction_tou span{
            font-size:22px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
          }
          .swiper_introduction_tel{
            width:252px;
            height:46px;
            background:rgba(52,99,230,1);
            border-radius:4px;
            display: flex;
            align-items: center;
            font-size:22px;
            font-family:PingFangSC-Semibold;
            font-weight:600;
            color:rgba(255,255,255,1);
          }
          .swiper_introduction_tel img{
            width: 22px;
            height: 22px;
            margin-right: 6px;
            margin-left: 30px;
          }

          .swiper_introduction_telonline{
            width:121px;
            height:44px;
            background:rgba(245,248,253,1);
            border-radius:4px;
            border:1px solid rgba(52,99,230,1);
            display: flex;
            align-items: center;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(90,137,234,1);
            margin-left: 10px;
          }
          .swiper_introduction_telonline img{
            width: 14px;
            height: 14px;
            margin-right: 5px;
            margin-left: 23px;
          }
          /*内容*/

          /*房源简介*/
          .house_det{
            margin: 14px 0 60px;
          }
          .house_det_title{
            margin-bottom: 20px;
            font-size:23px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
            line-height:32px;
          }
          .house_det_p{
            margin-bottom: 20px;
            font-size:15px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:24px;
            width:80%;
          }
          /*房源简介*/

          /*swiper2*/
          .swiper-containerrr{
            height: 360px;
            width: 1220px;
          }
          .swiper2{
            overflow: hidden;
            height: 360px;
            width: 1210px;
            margin-bottom: 70px;
          }
          .card{
            width:285px;
            height:331px;
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 6px 0px rgba(0,0,0,0.06);
            border-radius:4px;
            margin-right: 20px;
          }

          .card img{
            width: 100%;
            height: 213px;
            border-radius:4px 4px 0 0;
          }
          .card_word{
            width:257px;
            height:48px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:24px;
            margin: 20px 14px 6px;
            overflow: hidden;
          }
          .card_word2{
            height:24px;
          }
          .card_add{
            display: flex;
            align-items: center;
            margin: 0 14px;
          }
          .card_add_word{
            height:24px;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:24px;
            margin-right: 10px;
          }
          .card_add_num{
            height:24px;
            font-size:16px;
            font-family:Helvetica-Bold;
            font-weight:bold;
            color:rgba(231,99,76,1);
            line-height:24px;
          }
          .swiper-button-prev2{
            height: 40px;
            width: 40px;
            background:rgba(0,0,0,0.4);
            border-radius:0px 4px 4px 0px;
            left: 0;
            top: 107px;
          }
          .swiper-button-prev2::after{
            content: ' ';
            height: 22px;
            width: 22px;
            position: absolute;
            left: calc(50% - 11px);
            top: calc(50% - 11px);
            background: url('__IMG__/back_left.png') no-repeat center center;
            background-size:22px 22px;
          }
          .swiper-button-next2{
            height: 40px;
            width: 40px;
            background:rgba(0,0,0,0.4);
            border-radius: 4px 0px 0px 4px;
            right: 20px;
            top: 107px;
          }
          .swiper-button-next2::after{
            content: ' ';
            height: 22px;
            width: 22px;
            position: absolute;
            left: calc(50% - 11px);
            top: calc(50% - 11px);
            background: url('__IMG__/back_right.png') no-repeat center center;
            background-size:22px 22px;
          }
          .card:hover{
            box-shadow:0px 10px 20px 0px rgba(0,0,0,0.08);
          }
          /*swiper2*/

          /*swiper1*/

          .swiper{
            height: 492px;
            width: 710px;
          }
          .bgc{
            background-color: red;
            width: 100%;
            height: 400px;
          }
          .swiper-slide-img{
            width: 100%;
            height: 400px;
          }
          .swiper-slide-img1{
            width: 120px;
            height: 84px;
          }
          #thumbs .swiper-slide{
          line-height:90px!important;
          opacity:0.4;
          }
          #thumbs .swiper-slide-thumb-active{
          opacity:1;
          }
          .swiper-containerr{
            width: 632px;
            margin-top: 4px;
          }



          .swiper-button-prev1{
            height: 84px;
            width: 32px;
            background:rgba(51,51,51,1);
            left: 0;
            top: 430px;
          }
          .swiper-button-prev1::after{
            content: ' ';
            height: 22px;
            width: 22px;
            position: absolute;
            left: calc(50% - 11px);
            top: calc(50% - 11px);
            background: url('__IMG__/back_left.png') no-repeat center center;
            background-size:22px 22px;
          }
          .swiper-button-next1{
            height: 84px;
            width: 32px;
            background:rgba(51,51,51,1);
            right: 0px;
            top: 430px;
            z-index: 500;
          }
          .swiper-button-next1::after{
            content: ' ';
            height: 22px;
            width: 22px;
            position: absolute;
            left: calc(50% - 11px);
            top: calc(50% - 11px);
            background: url('__IMG__/back_right.png') no-repeat center center;
            background-size:22px 22px;
          }
          .swiper{
            position: relative;
          }
          /*swiper1*/
      </style>
<style>
  .con_li_label{
    height: 30px;
    margin-top: 24px;
  }
  .con_li_labels{
    min-width: 60px;
    height:30px;
    background:rgba(230,237,255,1);
    border-radius:4px;
    margin-right: 10px;
    font-size:13px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(53,86,179,1);
    line-height: 30px;
    text-align: center;
    padding: 0 10px;
  }
  .hidden{
    display: none;
  }
  .label {
    width: 60px;
    height: 30px;
    background: rgba(106, 182, 144, 1);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 30px;
    text-align: center;
  }
  .feture {
    display: inline-block;
    padding: 6px 10px;
    background: rgba(243, 245, 247, 1);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(136, 154, 172, 1);
    margin-right: 10px;
    margin-bottom: 20px;
  }
</style>
  <body>
<div class="content">
  <div class="navigation">
    <span>置家优选</span>
    <img src="__IMG__/jiantou_right.png" alt="">
    <span>小区</span>
    <img src="__IMG__/jiantou_right.png" alt="">
    <span>小区详情</span>
  </div>
  <div class="navigation_title">
    {$data.dis_name}
  </div>
</div>


<div class="contents flex-wrap">
    <div class="swiper">
      <div class="swiper-container"  id="gallery">
          <div class="swiper-wrapper">
            {volist name="$data['dis_images']" id='img'}
              <div class="swiper-slide"><img src="{$img}" alt="" class="swiper-slide-img"></div>
            {/volist}
          </div>
      </div>

      <div class="swiper-container swiper-containerr"  id="thumbs">
          <div class="swiper-wrapper">
            {volist name="$data['dis_images']" id='img'}
            <div class="swiper-slide swiper-slide-img1"><img src="{$img}" alt="" class="swiper-slide-img1"></div>
            {/volist}
          </div>
      </div>
      <div class="swiper-button-prev swiper-button-prev1" style="outline: none;"></div><!--左箭头-->
      <div class="swiper-button-next swiper-button-next1" style="outline: none;"></div><!--右箭头-->
    </div>
    <div class="swiper_introduction">
      <div class="swiper_introduction_title flex-wrap">
        <div class="swiper_introduction_title_num">
          <span>均价&nbsp;&nbsp;</span>{$data.dis_price ?: 0}<span>&nbsp;&nbsp;元/㎡</span>
        </div>
        <div class="flex-con"></div>
      </div>
      <div class="swiper_introduction_xin">
        <div class="flex-wrap">
          <div class="swiper_introduction_ci">
            <span class="iLeft">楼栋数</span>
            <span>{$data['dis_loudong']}</span>
          </div>
          <div class="swiper_introduction_ci">
            <span class="iLeft">户数</span>
            <span>{$data['dis_house']}</span>
          </div>
        </div>
        <div class="flex-wrap">
          <div class="swiper_introduction_ci">
            <span class="iLeft">楼型</span>
            <span>{$data['dis_louxing']}</span>
          </div>
          <div class="swiper_introduction_ci">
            <span class="iLeft">年代</span>
            <span>{$data['dis_year']}</span>
          </div>
        </div>
        <div class="flex-wrap">
          <div class="swiper_introduction_ci">
            <span class="iLeft">容积率</span>
            <span>{$data['dis_rongji']}</span>
          </div>
          <div class="swiper_introduction_ci">
            <span class="iLeft">绿化率</span>
            <span>{$data['dis_lvhua']}</span>
          </div>
        </div>
      </div>
      <div class="swiper_introduction_xin">
        <div class="flex-wrap">
          <div class="swiper_introduction_ci">
            <span class="iLeft">商圈</span>
            <span>{$data['dis_shangq']}</span>
          </div>
          <div class="swiper_introduction_ci">
            <span class="iLeft">建筑面积</span>
            <span>{$data['dis_mendian']}</span>
          </div>
        </div>
        <div class="swiper_introduction_ci">
          <span class="iLeft">交通</span>
          <span>{$data['dis_jiaot']}</span>
        </div>
        <div class="swiper_introduction_ci">
          <span class="iLeft">地址</span>
          <span>{$data['dis_address']}</span>
        </div>
      </div>
      <div class="swiper_introduction_xin">
        <div class="swiper_introduction_ci">
          <span class="iLeft">物业公司</span>
          <span>{$data['dis_wuyecom']}</span>
        </div>
        <div class="swiper_introduction_ci">
          <span class="iLeft">物业费</span>
          <span>{$data['dis_wuyefei']}</span>
        </div>
        <div class="swiper_introduction_ci">
          <span class="iLeft">开发商</span>
          <span>{$data['dis_kaifa']}</span>
        </div>
      </div>

    </div>
</div>



<div class="contents">
  <div class="house_det">
    <div class="house_det_title">
      小区介绍
    </div>
    <div class="house_det_p">
      {$data.dis_desc}
    </div>
  </div>
  <!--地图start-->
  <style>
    .amap-icon img {
      width: 25px;
      height: 34px;
    }

    .amap-marker-label{
      position: absolute;
      z-index: 2;
      border: 1px solid blue;
      background-color: white;
      white-space: nowrap;
      cursor: default;
      padding: 3px;
      font-size: 12px;
      line-height: 14px;
      border: 0;
      background-color: transparent;
    }

    .info{
      padding: .75rem 1.25rem;
      margin-bottom: 1rem;
      border-radius: .25rem;
      position: fixed;
      top: 1rem;
      background-color: white;
      width: auto;
      min-width: 22rem;
      border-width: 0;
      right: 1rem;
      box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
      position: relative;
      top: 0;
      right: 0;
      min-width: 0;
    }
  </style>
  <div id="container" style="width:80%;height: 350px;">

  </div>
  <!--地图end-->

  <style>
    .person{
      padding:30px 0px;
      border-bottom:1px solid #EDEDED;
    }
    .avatar{
      width:133px;
      height:160px;
      border-radius:4px;
      margin-right:35px;
      cursor: pointer;
    }
    .name1{
      font-size:20px;
      font-weight:500;
      color:rgba(51,51,51,1);
    }
    .kefu{
      width:34px;
      height:32px;
      margin-left:21px;
    }
    .addr{
      font-size:14px;
      font-weight:400;
      color:rgba(153,153,153,1);
      margin-top:15px;
    }
    .phone{
      font-size:26px;
      font-weight:bold;
      color:rgba(106,182,144,1);
      margin-bottom:7px;
    }
    .phone1{
      font-size:14px;
      font-weight:400;
      color:rgba(153,153,153,1);
    }
  </style>
  <div style="clear: both;width: 100%;height: 20px;"></div>
  <div class="house_det_title" style="margin-bottom: 0">
    小区经纪人
  </div>
      <div>
        {volist name='tjuser' id='u'}
        <div class="person flex-wrap">
          <img src="{$u.user_image}" class="avatar" onclick="gojjrinfo({$u.user_id});">
          <div class="flex-con">
            <div style="float: right;width:205px;height: 170px;margin-top: 0;text-align: center;">
              <img src="{$u.user_ercode}" width="100" height="100" />
              <div style="line-height: 20px;height: 20px;font-size: 16px;text-align: center;width: 200px;">微信扫码打电话</div>
              <div style="line-height: 30px;height: 30px;font-size: 14px;text-align: center;width: 200px;color:gray;">扫码失败可拨打</div>
              <div style="line-height: 20px;height: 20px;font-size: 18px;text-align: center;width: 200px;color: orange;">{$jjrPhone}</div>
            </div>
            <div class="name1 flex-wrap">
              <div style="cursor: pointer" onclick="gojjrinfo({$u.user_id});">{$u.user_username}</div>
              <img src="__IMG__/kefu.png" class="kefu" onclick="gettalk({$u.user_id});">
            </div>
            <div class="addr">{$u.user_shop}</div>
          </div>
        </div>
        {/volist}
      </div>
  <div style="clear: both;width: 100%;height: 20px;"></div>
  <!--户型图 start -->
  <div class="house_det_title">
    小区户型
  </div>
  <div class="flex-wrap">
    {volist name='huxings' id='n'}
    <div class="card" style="height: 270px;">
      <img src="{$n.dh_image}" alt="">
      <div class="card_word card_word2" style="margin-top: 14px;">
        {$n.dh_name}
      </div>
    </div>
    {/volist}
  </div>
  <div style="clear: both;width: 100%;height: 20px;"></div>
  <!--户型图  end -->
  <!---->
  <style>
    .labelll{
      position: absolute;
      top:0;
      left:0;
      padding-left: 12px;
      padding-right:12px;
      height:30px;
      background:rgba(235,188,87,1);
      border-radius:4px 0px 4px 0px;
      font-size:14px;
      font-weight:400;
      color:rgba(255,255,255,1);
      line-height:30px;
      align-items: center;
    }
    .hloge{
      width:14px;
      height:14px;
      margin-right:3px;
    }
    .lImg{
      width:285px;
      height:213px;
    }
    .sname{
      font-size:16px;
      font-weight:400;
      color:rgba(51,51,51,1);
      align-items: center;
      margin-top:17px;
      margin-bottom:8px;
    }
    .sLabel{
      width:38px;
      height:20px;
      background:rgba(106,182,144,1);
      border-radius:2px;
      font-size:12px;
      font-weight:400;
      color:rgba(255,255,255,1);
      text-align: center;
      line-height: 20px;
    }
    .saddr{
      font-size:14px;
      font-weight:400;
      color:rgba(153,153,153,1);
      margin-bottom:6px;
    }
    .sintro{
      font-size:14px;
      font-weight:400;
      color:rgba(153,153,153,1);
      margin-bottom:8px;
      margin-top:5px;
    }
    /*这里有个hot，放上面了*/
    .price{
      font-size:12px;
      font-weight:400;
      color:rgba(231,99,76,1);
    }
    .price1{
      font-size:16px;
    }
    .sintro1{
      font-size:14px;
      font-weight:400;

      color:rgba(102,102,102,1);
    }
    .hot{
      width:20px;
      height:20px;
      background:rgba(240,143,94,1);
      border-radius:2px;
      font-size:12px;
      font-weight:400;
      color:rgba(255,255,255,1);
      line-height:20px;
      text-align: center;
      margin-right:5px;
    }
    .adv{
      width:1200px;
      height:200px;
      margin:50px auto;
    }
  </style>
  <div class="house_det_title">
    小区二手房推荐
  </div>
  <div class="flex-wrap">
    {volist name='tjerhouse' id='n'}
    <div class="card" style="height: 350px;position: relative;display: inline-block;" onclick="godetail({$n.h_id});">
      <img src="{$n.h_img}" class="lImg">
      <div style="margin:0 14px">
        <div class="sname flex-wrap">
          <div class="flex-con" style="height:48px;line-height: 24px;overflow: hidden">{$n.h_title}</div>
        </div>
        <div class="sintro">{$n.district}&nbsp;&nbsp;{$n.h_xiaoqu}&nbsp;&nbsp;{$n.h_shis}室{$n.h_tings}厅&nbsp;&nbsp;&nbsp;&nbsp;{$n.h_mianji}m²</div>
        <div class="flex-wrap">
          <div class="hot">热</div>
          <div class="flex-con sintro1">{$n.h_hot_title}</div>
          <div class="price"><span class="price1">{$n.h_price}万</span></div>
        </div>
      </div>
    </div>
    {/volist}
  </div>
  <div class="house_det_title" style="margin-top: 20px;">
    小区租房推荐
  </div>
  <div class="flex-wrap">
    {volist name='tjzuhouse' id='n'}
    <div class="card" style="height: 350px;position: relative;display: inline-block;" onclick="godetail({$n.h_id});">
      <img src="{$n.h_img}" class="lImg">
      <div style="margin:0 14px">
        <div class="sname flex-wrap">
          <div class="flex-con" style="height:48px;line-height: 24px;overflow: hidden">{$n.h_title}</div>
        </div>
        <div class="sintro">{$n.district}&nbsp;&nbsp;{$n.h_xiaoqu}&nbsp;&nbsp;{$n.h_shis}室{$n.h_tings}厅&nbsp;&nbsp;&nbsp;&nbsp;{$n.h_mianji}m²</div>
        <div class="flex-wrap">
          <div class="hot">热</div>
          <div class="flex-con sintro1">{$n.h_hot_title}</div>
          <div class="price"><span class="price1">{$n.h_price}元/月</span></div>
        </div>
      </div>
    </div>
    {/volist}
  </div>
  <img src="{$mf_img}" class="adv">
</div>

{include file="public/wechat"}
{include file="public/foot1"}
  </body>
  </html>
<script src="/static/admin/js/jquery.min.js"></script>
<script src="__JS__/swiper4.min.js"></script>
<script src="__JS__/echarts.min.js" ></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=3108d268226b46915b5faa028a004245&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script>
    //-------------------跳转到详情----------------------
    function godetail(bid) {
        window.location.href = '/home/Build/buildInfo?b_id='+bid;
    }
    //填写卖房表单
    $('.adv').click(function () {
        window.location.href = '/home/Build/form_mf';
    })
    //经纪人详情
    function gojjrinfo(uid) {
        window.location.href = '/home/Economic/getDesignInfo?uid='+uid;
    }
    //-----------------------end------------------
</script>
<script>
    // var mySwiper1 = new Swiper ('#swiper1', {
    //   direction: 'horizontal', // 垂直切换选项
    //   loop: true, // 循环模式选项
    //   autoplay:true,//等同于以下设置
    //   spaceBetween: 10,
    //   slidesPerView: 4,
    //   watchSlidesVisibility: true,//防止不可点击
    //
    // })
    var thumbsSwiper = new Swiper('#thumbs',{
        spaceBetween: 10,
        slidesPerView: 5,
        watchSlidesVisibility: true,

    })
    var gallerySwiper = new Swiper('#gallery',{
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: thumbsSwiper,
        }
    })
    var mySwiper2 = new Swiper ('#swiper2', {
        direction: 'horizontal', // 垂直切换选项
        loop: false, // 循环模式选项
        // autoplay:true,//等同于以下设置
        // autoplayDisableOnInteraction: false,
        slidesPerView : 4,
        navigation: {
            nextEl: '#swiper-button-next1',
            prevEl: '#swiper-button-prev1',
        },
    })
</script>

<script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [{$data.dis_lon}, {$data.dis_lat}],
        zoom: 13
    });

    var marker = new AMap.Marker({
        position: map.getCenter(),
        icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        offset: new AMap.Pixel(-13, -30)
    });
    marker.setMap(map);
    // 设置label标签
    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    marker.setLabel({
        offset: new AMap.Pixel(0, 15),  //设置文本标注偏移量
        content: "<div class='info'>{$data.dis_name}</div>", //设置文本标注内容
        direction: 'top' //设置文本标注方位
    });
</script>
